import React from 'react';
import { Row, Col, Card, Tag, Button } from 'antd';
import { 
  EyeOutlined,
  LikeOutlined,
  CommentOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { POST_CATEGORIES } from '../../constants';
import CarouselBanner from '../../components/CarouselBanner/CarouselBanner';
import './Home.scss';

const Home: React.FC = () => {
  const navigate = useNavigate();

  // 轮播图数据
  const banners = [
    {
      id: '1',
      title: '欢迎来到校园平台',
      description: '分享知识，交流经验，参与活动，发现好物',
      image: 'https://picsum.photos/1200/300?random=1',
      link: '/posts',
    },
    {
      id: '2',
      title: '编程大赛火热进行中',
      description: '展示你的编程技能，赢取丰厚奖品',
      image: 'https://picsum.photos/1200/300?random=2',
      link: '/activities',
    },
    {
      id: '3',
      title: '知识库新内容上线',
      description: '最新学习资源，助你提升技能',
      image: 'https://picsum.photos/1200/300?random=3',
      link: '/knowledge',
    },
    {
      id: '4',
      title: '好价推荐专区',
      description: '发现校园好价，享受优惠价格',
      image: 'https://picsum.photos/1200/300?random=4',
      link: '/products',
    },
  ];

  // 精选帖子
  const featuredPosts = [
    {
      id: '1',
      title: '关于期末考试复习方法的讨论',
      author: { username: '张三', avatar: 'https://picsum.photos/40/40?random=11' },
      category: 'discussion',
      createdAt: '2024-01-15 10:30',
      views: 1560,
      likes: 230,
      comments: 58,
      featured: true,
      image: 'https://picsum.photos/300/200?random=11',
    },
    {
      id: '2',
      title: '大学生必备的高效学习工具推荐',
      author: { username: '李四', avatar: 'https://picsum.photos/40/40?random=12' },
      category: 'share',
      createdAt: '2024-01-15 09:15',
      views: 2340,
      likes: 456,
      comments: 89,
      featured: true,
      image: 'https://picsum.photos/300/200?random=12',
    },
    {
      id: '3',
      title: '程序员必读书单 - 从入门到精通',
      author: { username: '王五', avatar: 'https://picsum.photos/40/40?random=13' },
      category: 'share',
      createdAt: '2024-01-15 08:45',
      views: 1890,
      likes: 345,
      comments: 67,
      featured: true,
      image: 'https://picsum.photos/300/200?random=13',
    },
    {
      id: '4',
      title: '校园二手市场使用攻略',
      author: { username: '赵六', avatar: 'https://picsum.photos/40/40?random=14' },
      category: 'share',
      createdAt: '2024-01-14 16:30',
      views: 1230,
      likes: 198,
      comments: 43,
      featured: true,
      image: 'https://picsum.photos/300/200?random=14',
    },
  ];

  // 今日推荐
  const todayRecommendations = [
    {
      id: '11',
      title: 'MacBook Pro 2019 13寸',
      type: 'product',
      image: 'https://picsum.photos/200/200?random=21',
      price: 6500,
      category: '电子产品',
    },
    {
      id: '12',
      title: '校园编程大赛',
      type: 'activity',
      image: 'https://picsum.photos/200/200?random=22',
      startTime: '2024-01-20',
      participants: 45,
    },
    {
      id: '13',
      title: 'React 全栈开发教程',
      type: 'knowledge',
      image: 'https://picsum.photos/200/200?random=23',
      author: '计算机学院',
    },
    {
      id: '14',
      title: '机械键盘 Cherry MX',
      type: 'product',
      image: 'https://picsum.photos/200/200?random=24',
      price: 299,
      category: '电子产品',
    },
  ];

  const handlePostClick = (postId: string) => {
    navigate(`/posts/${postId}`);
  };

  return (
    <div className="home-page">
      {/* <div className="page-header">
        <h1>欢迎来到校园平台</h1>
        <p>在这里分享知识、交流经验、参与活动</p>
      </div> */}

      {/* 轮播图和公告区域 */}
      <Row gutter={16} className="banner-section">
        <Col xs={24} lg={17}>
          <CarouselBanner banners={banners} />
        </Col>
        <Col xs={24} lg={7}>
          <Card className="notice-card" title="📢 校园公告">
            <div className="notice-list">
              <div className="notice-item">
                <div className="notice-title">关于2024年春季学期选课通知</div>
                <div className="notice-meta">
                  <Tag color="red">重要</Tag>
                  <span className="notice-time">2024-01-15</span>
                </div>
              </div>
              <div className="notice-item">
                <div className="notice-title">图书馆开放时间调整说明</div>
                <div className="notice-meta">
                  <Tag color="orange">通知</Tag>
                  <span className="notice-time">2024-01-14</span>
                </div>
              </div>
              <div className="notice-item">
                <div className="notice-title">校园卡补办流程更新</div>
                <div className="notice-meta">
                  <Tag color="blue">提醒</Tag>
                  <span className="notice-time">2024-01-13</span>
                </div>
              </div>
            </div>
            <Button type="link" block className="more-btn">
              查看更多公告 →
            </Button>
          </Card>
        </Col>
      </Row>

      {/* 精选帖子 */}
      <Card 
        title="精选帖子" 
        extra={
          <Button type="link" onClick={() => navigate('/posts')}>
            查看更多
          </Button>
        }
        className="featured-card"
      >
        <Row gutter={[16, 16]}>
          {featuredPosts.map((post) => (
            <Col xs={24} sm={12} lg={6} key={post.id}>
              <Card
                hoverable
                className="featured-post-card"
                cover={
                  <img
                    alt={post.title}
                    src={post.image}
                    style={{ height: 160, objectFit: 'cover' }}
                  />
                }
                onClick={() => handlePostClick(post.id)}
              >
                <Card.Meta
                  title={<div className="featured-post-title">{post.title}</div>}
                  description={
                    <div className="featured-post-meta">
                      <Tag color="blue">
                        {POST_CATEGORIES[post.category as keyof typeof POST_CATEGORIES]}
                      </Tag>
                      <div className="post-stats">
                        <span><EyeOutlined /> {post.views}</span>
                        <span><LikeOutlined /> {post.likes}</span>
                        <span><CommentOutlined /> {post.comments}</span>
                      </div>
                    </div>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

      {/* 今日推荐 */}
      <Card 
        title="今日推荐" 
        className="recommendations-card"
      >
        <Row gutter={[16, 16]}>
          {todayRecommendations.map((item) => (
            <Col xs={24} sm={12} lg={6} key={item.id}>
              <Card
                hoverable
                className="recommendation-card"
                cover={
                  <img
                    alt={item.title}
                    src={item.image}
                    style={{ height: 200, objectFit: 'cover' }}
                  />
                }
              >
                <Card.Meta
                  title={<div className="recommendation-title">{item.title}</div>}
                  description={
                    <div className="recommendation-meta">
                      {item.type === 'product' && (
                        <>
                          <Tag color="green">{item.category}</Tag>
                          <div className="price">¥{item.price}</div>
                        </>
                      )}
                      {item.type === 'activity' && (
                        <>
                          <Tag color="orange">活动</Tag>
                          <div className="info">{item.participants} 人参与</div>
                        </>
                      )}
                      {item.type === 'knowledge' && (
                        <>
                          <Tag color="purple">知识</Tag>
                          <div className="info">{item.author}</div>
                        </>
                      )}
                    </div>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </Card>
    </div>
  );
};

export default Home;
